<template>
    <div class="tab">
        <router-link tag="div" class="tab-item" to="/calendar">
           日历
        </router-link>
        <router-link tag="div" class="tab-item" to="/confirm">
           确认框
        </router-link>
        <router-link tag="div" class="tab-item" to="/switch">
           切换框
        </router-link>
        <router-link tag="div" class="tab-item" to="/search">
           搜索框
        </router-link>
        <router-link tag="div" class="tab-item" to="/progressbar">
           进度条
        </router-link>
        <router-link tag="div" class="tab-item" to="/message">
           全局提醒
        </router-link>
        <router-link tag="div" class="tab-item" to="/pagination">
           分页
        </router-link>
        <router-link tag="div" class="tab-item" to="/upload">
           文件上传
        </router-link>
        <router-link tag="div" class="tab-item" to="/numberInput">
           数字输入框
        </router-link>
        <router-link tag="div" class="tab-item" to="/distPicker">
           三级联选
        </router-link>
        <router-link tag="div" class="tab-item" to="/form">
        表单验证
        </router-link>
        <router-link tag="div" class="tab-item" to="/display">
        display
        </router-link>
        <router-link tag="div" class="tab-item" to="/recursive">  
        递归组件
        </router-link>
        <router-link tag="div" class="tab-item" to="/tree">
        树形组件
        </router-link>
    </div>
</template>

<script>
export default {};
</script>

<style lang="stylus" scoped rel="stylesheet/stylus">
.tab {
    box-sizing: border-box;
    padding: 10px;

    .tab-item {
        padding: 10px;
        margin-bottom: 10px;
        background: #42b983;
        color: #fff;
        font-weight: bold;
        font-size: 18px;
        border-radius: 4px;

        &.router-link-active {
            background: #fff;
            color: #42b983;
        }
    }
}
</style>
